<template>
	<view class="container">
		<view class="v-order-item" v-for="(item,index2) in records" :key="index2" @click="btnselectClick(index2)">
			<!-- 订单编号 -->
			<view class="v-order-item__Title">
				<view class="schoolName">
					{{item.schoolName}}
					<text class="order_code">
						{{item.saleType | filterSendType}}
					</text>
				</view>
				<text class="order_status" :style="item.status == 1 ?'color: #FFA200;':item.status == 6?'color:#C90099;':item.status == 8?'color:#6EB74B;':item.status == 2?'color:#A38800;':''">
					{{item.statusName}}
				</text>
			</view>
			 <view v-if="item.picList.length ==1">
				<view  class="v-order-item__box">
					<view class="v-order-item__box-thumbnail">
						<image :src="item.picList[0]" />
						<view class="box-info__top">
							<!-- 标题和数量 -->
							<view class="box-info__title">{{item.goodsName}}</view>
							<view class="box-info__attr">{{msgDict.size}}:{{item.size}}</view>
						</view>
					</view>
				
					<view class="v-order-item__box-info">						    
						<view class="box-info__total_amount">￥{{item.totalPrice}}</view>
						<view class="box-info__status">x{{item.orderNum}}</view>
					</view>
				</view>
			 </view>
			 <view v-else class="scrollItem">
				 <scroll-view scroll-x="true" class="scroV" show-scrollbar='false'>
					<view class="ImgItem" v-for="(item1, index3) in item.picList" :key="index3">
						<image :src="item1" mode="aspectFill" 
						></image>
					</view>
				 </scroll-view>
				<view class="scrollItem_right">
					<view class="scrollItem_amount">￥{{item.totalPrice}}</view>
					<view class="scrollItem_status">x{{item.orderNum}}</view>
				</view>
			 </view>
			<view class="v-order-item__btnNum">
				<view class="btnSure" @click.stop="clickNext(item.orderCode,item.saleType)">
					{{msgDict.details}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {orders,listApplys,cancelOrder} from '@/api/index.js'
	export default {
		data() {
			return {
				records:[],
				userId:undefined,
				to : null,
				msgDict:{}
			}
		},
		onLoad() {
			
			
			
			this.msgDict = getApp().globalData.$t('order');
			this.userId = getApp().globalData.userId
			this.initDataList();
		},
		onPullDownRefresh() {
			this.initDataList();
		},
		filters: {
				filterOrderStatus(val) {
					let index= parseInt(val);
					switch (index){
						case 0:
						  return ''
							break;
						case 1:
						  return '待支付'
							break;
					    case 2:
					      return '已过期'
					    	break;			
						default:
						  return ''
							break;
					}
					
					
				},
				filterSendType(val) {
					
					if (val == '1') {
						return '预售'
					} else{
						return '零售'
					}
				},
				iszero(val) {
		
					if (parseInt(val, 10) > 0) {
		
						return val;
		
					} else {
						return '0'
					}
		
				},
				
				filterBtnStatus(val) {
					
					const num = parseInt(val, 10);
					switch (num) {
						case 0:
							{
								return '待付款';
								break;
							}
						case 1:
							{
								return '超期';
								break
							}
						case 3:
							{
								return '已付款';
								break;
							}
						case 4:
							{
								return '取消';
								break;
							}
						case 5:
							{
								return '已完成';
								break;
							}
						case 6:
							{
								return '待收货';
								break;
							}
						case 7:
							{
								return '售后处理中';
								break;
							}
						case 8:
							{
								return '售后已完成';
								break;
							}		
						default:
							{
								return '';
								break;
							}
		
					}
				}
			},
		    methods: {
			 async initDataList() {
				try{
					let {result} = await orders({
						orderStatus:'3',
						userId:this.userId
								
					});
					this.records =  result
					uni.stopPullDownRefresh();
				} catch(err) {
					
					uni.stopPullDownRefresh();
				}
				
				
			},
			//查看详情
			clickNext(e,saleType) {
				
				uni.navigateTo({
					url:'../orderDetail/orderDetail?orderCode='+e+'&saleType='+saleType
				})
			},
			btnselectClick(index){
				let item = this.records[index];
				uni.$emit('orderAll',item);
				uni.navigateBack({
					delta:1
				})
				
			}
			
		}
	}
</script>

<style lang="less">
page{
		/* height: 100%; */
	background-color: #F8F9FD;
}
.v-order-item {
			background-color: #fff;
			box-shadow: 0px 0px 10upx rgba(0, 0, 0, 0.1);
			border-radius: 10upx;
			padding: 30upx;
			margin-bottom: 30upx;
			
			.scrollItem{
				display: flex;
				justify-content: space-between;
				height: 110rpx;
				
				.scroV{
					height: 100%;
				    background: #fff;
					width: 480rpx;
					overflow: hidden;
					display: flex;
					flex-direction: row;
					white-space: nowrap;
					
					.ImgItem{
						
						// box-shadow: 0px 2px 10px 0px #EEF0F4;
						width: 106rpx;
						height: 106rpx;
						
						margin-right: 20rpx;
					    display: inline-block;
					   
					   
					   image{
						   border-radius: 8rpx;
						   border: 1rpx solid #f2f2f2;
						   height: 106rpx;
						   width: 106rpx;
					   }
						
					}
					
				}
				.scrollItem_right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;

					.scrollItem_amount{
						font-weight: 400;
						font-size: 30upx;
						display: flex;
						justify-content: space-between;
						color: #F54353;
					}
					.scrollItem_status{
						color: #999;
						font-size: 28upx;
						margin-top: 20upx;
						font-size: 24upx;
						text-align: right;
					}
				}
					
			}

			&__btnNum {
				
				display: flex;
				justify-content: flex-end;
				// background-color: #007AFF;
				align-items: center;
				padding-top: 40rpx;


				.btnCheck {

					width: 128upx;
					height: 52upx;
					border-radius: 27upx;
					border: thin solid #CECECE;
					font-size: 22upx;
					color: #333;
					font-weight: 400;
					line-height: 54rpx;
					text-align: center;
					margin-right: 20upx;

				}

				.btnSure {
					
					width: 128upx;
					height: 52upx;
					border-radius: 27upx;
					border: thin solid #2D63F9;
					font-weight: 400;
					color: #0005C9;
					font-size: 22upx;
					text-align: center;
					line-height: 54rpx;

				}
			}

			&__Title {
				// height: 60upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;
				.schoolName{
					height: 28upx;
					font-size: 28upx;
					font-weight: 400;
					color: #333333;
					line-height: 28upx;
					
					.order_code {
						background-color: #F2F8FF;
						font-weight: 400;
						color: #3679FF;
						font-size: 22rpx;
						padding: 3rpx 10rpx;
						border-radius: 5rpx;
						margin-left: 20rpx;
					}
				}

				

				.order_status {
					height: 37upx;
					font-size: 26upx;
					font-weight: 400;
					color: #444444;
					line-height: 37upx;
				}

			}


			&__box {
				display: flex;

				&-thumbnail {
					// width: 220upx;
					
					margin-right: 20upx;
					display: flex;
					
					image {
						box-shadow: 0px 2px 10px 0px #EEF0F4;
						width: 106rpx;
						height: 106rpx;
						border-radius: 8px;
						border: 1rpx solid #f2f2f2;
					}
					.box-info__top{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						.box-info__title {
							font-weight: 500;
							font-size: 24upx;
							display: flex;
							justify-content: space-between;
							color: #333333;
						}
						
						.box-info__attr {
							color: #999;
							font-size: 20upx;
							margin-top: 20upx;
							font-size: 24upx;
							// text-align: right;
						
						}
					}
					
				}

				&-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					overflow: hidden;
                    align-items: flex-end;
					// height: 100%;

					

					.goods_status {

						height: 37upx;
						font-size: 26upx;
						font-weight: 400;
						color: #C24E4E;
						line-height: 37upx;
					}

					.box-info__total_amount {
						font-size: 32upx;
						color: #333;
						

						
					}

					.box-info__status {
						font-size: 24upx;
						color: #999;
					}
				}
			}

			&__total {
				display: flex;
				float: right;
				justify-content: center;
				height: 90upx;

				.text1 {

					height: 26upx;
					font-size: 26upx;
					font-weight: 400;
					color: #C7C7C7;
					line-height: 26upx;
				}

				.text2 {

					height: 26upx;
					font-size: 26upx;
					font-weight: 400;
					color: #333333;
					line-height: 26upx;
				}

				.text3 {

					height: 26upx;
					font-size: 22upx;
					font-weight: 400;
					color: #333333;
					line-height: 26upx;
				}
			}

			.v-order-item__box+.v-order-item__box {
				margin-top: 30upx;
				padding-top: 30upx;
			}
		}
</style>
